<script setup lang="ts">
import { ElRow, ElCol, ElAnchor, ElAnchorLink, ElDivider } from "element-plus";
import { ref, onMounted, onUnmounted, watch } from "vue";
interface Props {
  scriptUrl?: string;
}

defineOptions({
  name: "NormalError",
});

const handleChange = (href: string) => {
  console.log(`anchor change: ${href}`);
};

let activeId = ref("#无法保存");
let goAnchor = function (selector) {
  document.querySelector(selector).scrollIntoView({
    behavior: "smooth",
  });
  activeId.value = selector;
};
let errorList = ref([
  "无法保存",
  "文件错误",
  "文件版本已更新",
  "下载失败",
  "令牌无效",
  "没有协作编辑",
  "文件版本打不开",
  "nc_port_number_invalid"
]);
</script>

<template>
  <div class="content_container">
    
    <div class="VPDocAside el-anchor el-anchor--underline el-anchor--vertical">
      <div style="width: 100%;background-color: #D4D7DE;height: 50px;text-align: center;line-height: 50px;font-weight: 600;font-size: 18px;">
        <h1>目录</h1>
      </div>
      <div class="el-anchor__list">
        <div class="el-anchor__item" @click="goAnchor('#' + error)" v-for="error in errorList">
          <a class="el-anchor__link" :class="'#' + error == activeId ? 'is-active' : ''" href="javascript:void(0);">{{ error }}</a>
        </div>
      </div>
    </div>
  

    <div style="position: relative" class="vp-doc">
      <div>
        <h2 id="无法保存" tabindex="-1">
          无法保存
          <a class="header-anchor" href="#无法保存">#</a>
        </h2>
        <p>
          <img
            src="/static/img/trouble_img/save-error.png"
            alt="回调保存失败"
          />
        </p>
        <p>编辑器加载了"无法保存文档"消息。</p>
        <p>
          文档编辑服务 无法连接到 editorConfig.callbackUrl 地址的 文档存储服务。
        </p>
        <p>
          检查 回调处理程序 是否正常工作。 文档存储服务 必须返回 {"error": 0}
          作为响应。
        </p>
        <el-divider />
        <h2 id="文件错误" tabindex="-1">
          文件错误
          <a class="header-anchor" href="#文件错误">#</a>
        </h2>
        <p>
          <img
            src="/static/img/trouble_img/saving-error.jpg"
            alt="保存文件错误"
          />
        </p>
        <p>编辑器加载了"保存文件时发生错误"消息。</p>
        <p>
          文档编辑服务 无法连接到 web-apps 与 server 层使用 sdk
          不一致造成脚本执行错误。
        </p>
        <p>检查 web-apps 层 与 server 层 是否使用相同的 sdk。</p>
        <el-divider />
        <h2 id="文件版本已更新" tabindex="-1">
          文件版本已更新
          <a class="header-anchor" href="#文件版本已更新">#</a>
        </h2>
        <p>
          <img
            src="/static/img/trouble_img/version-error.png"
            alt="文件版本已更新"
          />
        </p>
        <p>编辑器加载了"文件版本已更改。 将重新加载页面"消息。</p>
        <p>文档编辑服务 无法打开之前编辑和保存过的文件来进行编辑。</p>
        <p>不要忘记，每次编辑和保存文档时，都必须重新生成 document.key。</p>
        <el-divider />
        <h2 id="下载失败" tabindex="-1">
          下载失败
          <a class="header-anchor" href="#下载失败">#</a>
        </h2>
        <p>
          <img
            src="/static/img/trouble_img/download-error.png"
            alt="下载失败"
          />
        </p>
        <p>在编辑器加载过程中会显示"下载失败"消息。</p>
        <p>文档编辑服务 无法上传文件进行编辑。</p>
        <p>
          检查 document.url 中指定的文件的链接是否正确。 该链接必须可以从
          文档编辑服务访问。
        </p>
        <el-divider />
        <h2 id="令牌无效" tabindex="-1">
          令牌无效
          <a class="header-anchor" href="#令牌无效">#</a>
        </h2>
        <p>
          <img src="/static/img/trouble_img/token-error.png" alt="令牌无效" />
        </p>
        <p>
          编辑器加载了"文档安全令牌没有正确生成。
          请联系您的文档服务器管理员"消息。
        </p>
        <p>文档编辑服务 请求加密过的 签名。</p>
        <p>
          检查 令牌 是否正确。 令牌必须根据 JWT（JSON Web 令牌）标准
          生成并存在于 ONLYOFFICE 文档服务器 配置中。
        </p>
        <el-divider />
        <h2 id="没有协作编辑" tabindex="-1">
          没有协作编辑
          <a class="header-anchor" href="#没有协作编辑">#</a>
        </h2>
        <p>
          <img src="/static/img/trouble_img/e-coedit.png" alt="没有协作编辑" />
        </p>
        <p>当不同用户打开文档进行编辑时，无法进行共同编辑。</p>
        <p>文档编辑服务 打开 两个不同 的文件进行编辑。</p>
        <p>
          检查 document.key 值是否一致以便能够共同编辑同一个文档。 key
          值在保存后必须改变，不同文档必须不同，并且在共同编辑同一个文档时必须相同。
        </p>
        <el-divider />
        <h2 id="文件版本打不开" tabindex="-1">
          文件版本打不开
          <a class="header-anchor" href="#文件版本打不开">#</a>
        </h2>
        <p>
          <img
            src="/static/img/trouble_img/changes-url.png"
            alt="文件版本打不开"
          />
        </p>
        <p>文档编辑服务 无法打开文件版本。</p>
        <p>
          检查setHistoryData方法中的changesUrl链接是否与previous.url参数对应。
        </p>
        <el-divider />
        <h2 id="nc_port_number_invalid" tabindex="-1">
          nc: port number invalid
          <a class="header-anchor" href="#nc_port_number_invalid">#</a>
        </h2>
        <p>
          <img
            src="/static/img/trouble_img/port-number-invalid.jpg"
            alt="nc_port_number_invalid"
            style="max-width: 500px;"
          />
        </p>
        <p>这个问题通常是由于宿主机当前账号对于docker权限不足，比如当前用户不是sudo。</p>
        <p>
          在docker启动命令上加上 --privileged=true 就可以了，比如：。
        </p>
        <p>docker run --name=oo -i -t -d -p 10100:80 --restart=always 
          <span style="color: #ff0000;"><strong>--privileged=true</strong></span>
           -e JWT_ENABLED=false 镜像名称
        </p>
        <el-divider />
      </div>
    </div>
  </div>
</template>

<style scoped>
.content_container {
  width: 100%;
  height: calc(100vh - 88px);
  /* padding-left: 2.5%;
  padding-right: 2.5%; */
  /* padding-top: 5%; */
  display: flex;
  background: #ffffff;
}
.vp-doc {
  width: 95%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  display: flex;
  height: 100%;
  overflow: scroll;
}
.vp-doc h1 {
  letter-spacing: -0.02em;
  line-height: 40px;
  font-size: 32px;
}
.vp-doc .header-anchor {
  float: left;
  margin-left: -0.87em;
  padding-right: 0.23em;
  font-weight: 500;
  opacity: 0;
  /* transition: color 0.25s, opacity 0.25s; */
}
.vp-doc h2 {
  /* margin: 48px 0 16px;
  border-top: 1px solid rgba(60, 60, 60, 0.29); */
  padding-top: 24px;
  letter-spacing: -0.02em;
  line-height: 32px;
  font-size: 24px;
}
.vp-doc p {
  line-height: 28px;
}
.vp-doc p,
.vp-doc summary {
  margin: 16px 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  overflow-wrap: break-word;
}
img,
video {
  max-width: 100%;
  height: auto;
}
.vp-doc h1,
.vp-doc h2,
.vp-doc h3,
.vp-doc h4,
.vp-doc h5,
.vp-doc h6 {
  position: relative;
  font-weight: 600;
  outline: none;
}
.spacer {
  flex-grow: 1;
}
.VPDocAsideOutline.has-outline {
  display: block;
}
.content {
  position: relative;
  border-right: 1px solid rgba(60, 60, 60, 0.29);
  padding-left: 16px;
  font-size: 13px;
  font-weight: 500;
}
.outline-marker {
  position: absolute;
  top: 32px;
  left: -1px;
  z-index: 0;
  opacity: 0;
  width: 1px;
  height: 18px;
  background-color: #42b883;
  /* transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s,
    opacity 0.25s; */
}
.outline-title {
  letter-spacing: 0.4px;
  line-height: 28px;
  font-size: 13px;
  font-weight: 600;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.root {
  position: relative;
  z-index: 1;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.outline-link {
  display: block;
  line-height: 28px;
  color: rgba(60, 60, 60, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* transition: color 0.5s; */
}
a {
  color: inherit;
  text-decoration: inherit;
}
.VPDocAside {
  width: 15%;
  height: 100%;
  overflow: hidden;
}
.el-anchor__link {
    font-size: 14px;
    line-height: 22px;
    padding: 4px 0;
    color: #909399;
    transition: color .3s;
    white-space: nowrap;
    text-decoration: none;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    outline: none;
    cursor: pointer;
    text-align: center;
}
.el-anchor__link.is-active {
    color: #409eff;
}
</style>
